<div
	class="flex flex-col max-w-md gap-2 p-6 rounded-md shadow-md"
	[ngClass]="['bg' + contrast, 'text' + defaultInv]"
>
	<h2 class="text-xl font-semibold leading-tight tracking-wide">
		Quis vel eros donec ac odio tempor.
	</h2>
	<p class="flex-1" [ngClass]="['text' + plainInv]">
		Aenean sed adipiscing diam donec adipiscing tristique risus. Donec pretium vulputate sapien
		nec sagittis aliquam malesuada.
		<a href="#" rel="noopener noreferrer" class="font-semibold" [ngClass]="['text' + primary]">
			Learn more
		</a>
	</p>
	<div class="flex flex-col justify-center gap-3 mt-6 sm:flex-row">
		<button class="px-6 py-2 rounded-sm">Cancel</button>
		<button
			class="px-6 py-2 rounded-sm shadow-sm"
			[ngClass]="['bg' + primary, 'text' + contrast]"
		>
			Agree
		</button>
	</div>
</div>
